<template>
    <div id="information" :style="{ 'transition': isCollapse ? '.6s all' : '.35s all', 'width': isCollapse ? myWidth1 : myWidth2, 'height': myHeight }">

        <el-row :gutter="20" style="height:55%;margin-top: 15px;">
            <el-col :span="14" style="height:100%">
                <StudentDetail v-bind:studentdetail="studentdetail">
                </StudentDetail>
            </el-col>
            <el-col :span="10" style="height:100%">
                <UserDetail v-bind:userdetail="userdetail">
                </UserDetail>
            </el-col>
        </el-row>
        <BottomDetail v-bind:collegedata="collegedata"
            v-bind:studentdetail="studentdetail">
        </BottomDetail>
        
    </div>
</template>

<script>
import StudentDetail from '@/components/StudentDetail.vue';
import UserDetail from '@/components/UserDetail.vue'
import BottomDetail from '@/components/BottomDetail.vue';


export default {
    components: { StudentDetail, UserDetail, BottomDetail },
    data(){
        return{
            myHeight:"",
            myWidth1: "",//未展开的宽度
            myWidth2: "",//展开了的宽度
        }
    },
    props:{
        userdetail:[],
        isCollapse: true,
        studentdetail:[],
        collegedata:[]
    },
    created(){
        this.myHeight = window.innerHeight - 40 - 45  + "px";
        this.myWidth1 = window.innerWidth - 64 - 45 + "px"
        this.myWidth2 = window.innerWidth - 200 - 45 + "px"
    },
    mounted() {
        // console.log(this.userdetail);
        // console.log(this.studentdetail);
        
    }
}
</script>

<style scoped>
#information{
    float: left;
}
</style>